<template>
<view style="width: 750rpx ;height: 750rpx;">
    <l-signature disableScroll  ref="signatureRef" :penColor="penColor" :penSize="penSize" :openSmooth="openSmooth"  landscape></l-signature>
</view>
<view>
    <button @click="onClick('clear')">清空</button>
    <button @click="onClick('undo')">撤消</button>
    <button @click="onClick('save')">保存</button>
    <!-- uvue 不支持 openSmooth -->
    <button @click="onClick('openSmooth')">压感{{openSmooth?'开':'关'}}</button>
</view>
</template>

<script setup>
import { ref } from 'vue';
const title = ref('Hello');
const penColor = ref('red');
const penSize = ref(5);
const url = ref('');
const openSmooth = ref(true);
const signatureRef = ref(null);

const onClick = (type) => {
  if (type === 'openSmooth') {
    openSmooth.value = !openSmooth.value;
    return;
  }
  if (type === 'save') {
    signatureRef.value.canvasToTempFilePath({
      success: (res) => {
        // 是否为空画板 无签名
        console.log(res.isEmpty);
        // 生成图片的临时路径
        // H5 生成的是 base64
        url.value = res.tempFilePath;
		console.log("这是",url.value);
      },
    });
    return;
  }
  if (signatureRef.value) {
    signatureRef.value[type]();
  }
};
</script>

<style lang="scss" scoped>

</style>